<?php

use home\assets\PageAsset;

/* @var $this yii\web\View */
/* @var $model \home\models\Cases */

$this->title = 'Biffar Case - ' . $model->name;
$this->params['breadcrumbs'][] = ['label' => 'Biffar工程案例', 'url' => ['case/index']];
$this->params['breadcrumbs'][] = ['label' => $model->age, 'url' => ['case/index', 'age' => $model->age]];
$this->params['breadcrumbs'][] = $model->name;

PageAsset::register($this)->init([
    'css' => [
        'css/case.css',
    ],
]);
?>

<div class="page-body">
    <div class="container">
        <div class="case-view clearfix">
            <div class="case-image">
                <img src="<?= $model->getPreviewUrl(1170, 700, false) ?>" />
            </div>

            <div class="case-nav">
                <ul>
                    <li class="active"><img src="<?= $model->getPreviewUrl(134, 80) ?>" data-src="<?= $model->getPreviewUrl(1170, 700, false) ?>" /></li>
                    <?php foreach($model->gallery as $gallery){ ?>
                    <li><img src="<?= $gallery->getImageUrl(134, 80) ?>" data-src="<?= $gallery->getImageUrl(1170, 700, false) ?>" /></li>
                    <?php } ?>
                </ul>
            </div>

            <div class="case-desc">
                <?= nl2br($model->description) ?>
            </div>
        </div>

        <?php if($model->products){ ?>
        <div class="relation-area relation-area-white">
            <div class="relation-title">
                <h1>Product</h1>
                <h3>项目中Biffar产品</h3>
            </div>

            <div class="relation-box">
                <span class="relation-button">&nbsp;</span>
                <div class="relation-list">
                    <ul>
                        <?php foreach($model->products as $product){ ?>
                            <li><a href="<?= $product->getViewUrl() ?>"><img src="<?= $product->getPreviewUrl(264, 170) ?>" /></a></li>
                        <?php } ?>
                    </ul>
                </div>
                <span class="relation-button">&nbsp;</span>
            </div>
        </div>
        <?php } ?>
    </div>

    <?php if($model->cases){ ?>
    <div class="relation-area">
        <div class="container">
            <div class="relation-title">
                <h1>Case</h1>
                <h3>其他案例</h3>
            </div>

            <div class="relation-box">
                <a class="relation-button relation-left"><span class="iconfont icon-left"></span></a>
                <div class="relation-list">
                    <ul>
                        <?php foreach($model->cases as $case){ ?>
                        <li><a href="<?= $case->getViewUrl() ?>"><img src="<?= $case->getPreviewUrl(264, 170) ?>" /></a></li>
                        <?php } ?>
                    </ul>
                </div>
                <a class="relation-button relation-right"><span class="iconfont icon-right"></span></a>
            </div>
        </div>
    </div>
    <?php } ?>
</div>

<?php

$js = <<<JS

$('.case-nav > ul > li > img').click(function(){
    $(this).closest('ul').find('li').removeClass('active');
    $(this).parent('li').addClass('active');
    $('.case-image > img').attr('src', $(this).data('src'));
});

JS;

$this->registerJs($js);